<template>
  <el-dialog v-drag width="30%" @close="addCateDialogClosed" :title="!dataForm.categoryId ? '新增分类' : '修改分类'"
    :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="80px">
      <el-form-item label="分类名称" prop="catName">
        <el-input size="mini" v-model="dataForm.catName" placeholder="分类名称"></el-input>
      </el-form-item>
      <el-form-item label="父级分类" prop="parentId">
        <el-cascader size="mini" placeholder="请选择分类" v-model="selectKeys" expand-trigger="hover" :props="cascaderProps"
          :options="parentCateList" filterable clearable :change-on-select="true" @change="handleCascaderChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="排序">
        <el-input size="mini" v-model="dataForm.sort" placeholder="排序"></el-input>
      </el-form-item>
      <el-form-item label="图标地址">
        <!-- <el-input size="mini" v-model="dataForm.icon" placeholder="图标地址"> -->
        <el-row>
          <el-col :span="22">
            <el-popover ref="iconListPopover" placement="bottom-start" trigger="click"
              popper-class="mod-menu__icon-popover">
              <div class="mod-menu__icon-inner">
                <div class="mod-menu__icon-list">
                  <el-button size="mini" v-for="(item, index) in iconList" :key="index" @click="iconActiveHandle(item)"
                    :class="{ 'is-active': item === dataForm.icon }">
                    <icon-svg :name="item"></icon-svg>
                  </el-button>
                </div>
              </div>
            </el-popover>
            <el-input size="mini" v-model="dataForm.icon" v-popover:iconListPopover :readonly="true"
              placeholder="菜单图标名称" class="icon-list__input"></el-input>
          </el-col>
          <el-col :span="2" class="icon-list__tips">
            <el-tooltip placement="top" effect="light">
              <div slot="content">全站推荐使用SVG Sprite, 详细请参考:<a
                  href="https://gitee.com/charlinchenlin/store-pos/blob/master/src/icons/index.js"
                  target="_blank">icons/index.js</a>描述</div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </el-col>
        </el-row>
        </el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input size="mini" v-model="dataForm.reamrk" placeholder="备注"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="visible = false">取消</el-button>
      <el-button size="mini" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import Icon from '@/icons'
  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          categoryId: '',
          catName: '',
          parentId: 0,
          parentName: '',
          catLevel: 1,
          sort: '',
          icon: '',
          reamrk: '',
          iconList: [],
        },
        dataRule: {
          catName: [{
            required: true,
            message: '分类名称不能为空',
            trigger: 'blur'
          }],
          parentCid: [{
            required: true,
            message: '父分类id不能为空',
            trigger: 'blur'
          }],
        },
        parentCateList: [],
        //保存级联选择的id
        selectKeys: [],
        //级联配置
        cascaderProps: {
          value: 'categoryId',
          label: 'catName',
          children: 'children'
        },
      }
    },
    created() {
      this.iconList = Icon.getNameList()
      this.getParentCategories()
    },
    methods: {
      init(categoryId) {
        this.dataForm.categoryId = categoryId
        this.visible = true
        this.$nextTick(async () => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.categoryId) {
            const res = await this.$http({
              url: `/goods/goodscategory/info/${this.dataForm.categoryId}`,
              method: 'get',
              params: this.$http.adornParams()
            })
            let data = res.data
            if (data && data.code === 0) {
              this.dataForm = data.goodsCategory
              this.selectKeys = this.dataForm.selectIds;
            }
          }
        })
      },
      async getParentCategories() {
        const res = await this.$http({
          url: `/goods/goodscategory/getTree`,
          method: 'get',
          params: this.$http.adornParams({'level': 2})
        })
        let data = res.data
        if (data && data.code === 0) {
          this.parentCateList = data.data;
        }
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate(async (valid) => {
          if (valid) {
            const res = await this.$http({
              url: this.$http.adornUrl(`/goods/goodscategory/${!this.dataForm.categoryId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData(this.dataForm)
            });
            let data = res.data;
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          }
        })
      },
      handleCascaderChange() {
        console.log("this.selectKeys==", this.selectKeys)
        if (this.selectKeys.length > 0) {
          let parentId = this.selectKeys[this.selectKeys.length - 1];
          //父级分类的id
          this.dataForm.parentId = parentId
          this.dataForm.catLevel = this.selectKeys.length + 1
        } else {
          this.dataForm.parentId = 0
          this.dataForm.catLevel = 1
        }
      },
      //关闭事件处理，重置数据
      addCateDialogClosed() {
        this.$refs['dataForm'].resetFields()
        this.dataForm.parentId = 0
        this.dataForm.parentName = ''
        this.dataForm.catLevel = 1
        this.selectKeys = []
      },
      // 图标选中
      iconActiveHandle(iconName) {
        this.dataForm.icon = iconName
      },
    }
  }
</script>

<style lang="scss">
  .mod-menu {
    .icon-list__input {
      >.el-input__inner {
        cursor: pointer;
      }
    }

    &__icon-popover {
      width: 458px;
      overflow: hidden;
    }

    &__icon-inner {
      width: 478px;
      max-height: 258px;
      overflow-x: hidden;
      overflow-y: auto;
    }

    &__icon-list {
      width: 458px;
      padding: 0;
      margin: -8px 0 0 -8px;

      >.el-button {
        padding: 8px;
        margin: 8px 0 0 8px;

        >span {
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
    }

    .icon-list__tips {
      font-size: 18px;
      text-align: center;
      color: #e6a23c;
      cursor: pointer;
    }
  }
</style>
